<template>
  <div>
    App
    <!-- 
      slot 插槽

        作用：父子组件通信，通信的是标签数据

        分类：

          1. 默认插槽
          2. 具名插槽
          3. 作用域插槽

          优先考虑默认插槽，其他内容考虑具名插槽
          渲染标签数据需要使用子组件数据，使用作用域插槽
     -->
    <A>
      <!-- 默认插槽 -->
      <div>111</div>
      <p>222</p>
      <button>333</button>
    </A>

    <hr />

    <B>
      <!-- 具名插槽 -->
      <!-- 最早写法，废弃的，不建议使用 -->
      <!-- <template slot="header">
        <header>header..</header>
      </template>

      <template slot="footer">
        <footer>footer..</footer>
      </template> -->

      <!-- v-slot指令写法 -->
      <!-- <template v-slot:header>
        <header>header..</header>
      </template>

      <template v-slot:footer>
        <footer>footer..</footer>
      </template> -->

      <!-- v-slot指令简写 -->
      <template #header>
        <header>header..</header>
      </template>

      <!-- 默认插槽其实可以有名字，就是default，一般不写 -->
      <!-- <template #default> -->
      <div>111</div>
      <div>222</div>
      <div>333</div>
      <!-- </template> -->

      <template #footer>
        <footer>footer..</footer>
      </template>
    </B>

    <hr />

    <C>
      <!-- 传递插槽数据默认可以使用当前组件的所有数据 -->
      <!-- 需求：传递插槽数据想要使用子组件的数据 -->
      <!-- 父组件可以接受到子组件给插槽传递的数据 -->
      <!-- <template #default="slotScoped">
        <p>num: {{ num }}</p>
        <p v-show="slotScoped.loading">loading</p>
      </template> -->

      <!-- <template v-slot:default="slotScoped">
        <p>num: {{ num }}</p>
        <p v-show="slotScoped.loading">loading</p>
      </template> -->

      <!-- <template v-slot="slotScoped">
        <p>num: {{ num }}</p>
        <p v-show="slotScoped.loading">loading</p>
      </template> -->

      <template v-slot="{ loading }">
        <p>num: {{ num }}</p>
        <p v-show="loading">loading</p>
      </template>

      <template #xxx="{ loading }">
        <p v-show="loading">loading</p>
      </template>
    </C>
  </div>
</template>

<script>
import A from "./A";
import B from "./B";
import C from "./C";

export default {
  name: "App",
  components: {
    A,
    B,
    C,
  },
  data() {
    return {
      num: 0,
    };
  },
};
</script>

<style></style>
